<template>
  <div class="dialog-box">
    <el-dialog
      v-model="state.dialogVisible"
      :title="state.title"
      width="30%"
      :before-close="handleClose"
    >
      <div class="reservoir-form">
        <el-form
          ref="state.ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="160px"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
        >
          <el-form-item label="联合调度区间名称" prop="name">
            <el-input v-model="state.ruleForm.rangeName" />
          </el-form-item>
          <el-form-item label="联合调度区间编码" prop="name">
            <el-input v-model="state.ruleForm.rangeCode" />
          </el-form-item>
          <el-form-item label="联合调度区间所在河系" prop="region">
            <el-select v-model="state.ruleForm.zoneResv" placeholder="请选择">
              <el-option label="大汶河" :value="0" />
              <el-option label="沂河" :value="1" />
              <el-option label="沭河" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="出口预报断面" prop="region">
            <el-select v-model="state.ruleForm.outBlkcd" placeholder="请选择" filterable>
              <el-option
                :key="index"
                v-for="(item, index) in state.secList"
                :value="item.blkcd"
                :label="item.blknm"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="拓扑等级" prop="name">
            <el-input-number v-model="state.ruleForm.depth" />
          </el-form-item>
          <!-- <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)"> Create </el-button>
            <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
          </el-form-item> -->
        </el-form>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCloseModel">取消</el-button>
          <el-button type="primary" @click="handleSaveForm">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, defineExpose } from 'vue'
import { getSectionTree, saveJointRange } from '@/services/modules/model-config.js'
const state = reactive({
  dialogVisible: false,
  title: '新建联合调度',
  secList: [],
  ruleForm: {
    rangeCode: '',
    rangeName: '',
    zoneId: 1,
    zoneResv: '',
    outBlkcd: '',
    depth: ''
  }
})
const emit = defineEmits(['handleRefresh'])
defineExpose({ handleOpenDialog })
function handleOpenDialog(item) {
  if (item.id) {
    state.ruleForm = item
    state.title = '修改联合调度'
  } else {
    state.title = '新建联合调度'
    Object.keys(state.ruleForm).forEach((key) => {
      state.ruleForm[key] = ''
    })
  }

  state.dialogVisible = true
  getSecList(item.zoneId)
}
//获取所有预报断面
function getSecList(id) {
  getSectionTree({ zoneId: id }).then((res) => {
    if (res.code === 200) {
      state.secList = res.data
      state.secList = [{ blkcd: -1, blknm: '无' }, ...res.data]
    }
  })
}
function handleCloseModel() {
  state.dialogVisible = false
}
//保存form
function handleSaveForm() {
  saveJointRange(state.ruleForm).then((res) => {
    if (res.code === 200) {
      emit('handleRefresh')
      handleCloseModel()
    }
  })
}
</script>

<style lang="less" scoped>
.dialog-box {
  .reservoir-form {
    display: flex;
    line-height: 30px;
    span {
      width: 100px;
    }
  }
}
</style>
>
